<template>
    <div class="photoAlbumDetailsContent">
        <div class="photoAlbumDetailsTopBox">
            <div class="advertisement">
                <img :src="advertisement1" alt="">
            </div>
            <div class="advertisement">
                <img :src="advertisement3" alt="">
            </div>
        </div>
        <div class="photoAlbumDetailsMainBox">
            <div class="photoAlbumDetailsMainBoxItem" v-for="(item, index) in friendsItemPhotoList" :key="index" @click="showBigImg(item)">
                <div class="imgBox" v-if="item.type == 'local'">
                    <img :src="getAssetsFile(item.img)" alt="">
                </div>
                <div class="imgBox" v-if="item.type == 'video'">
                    <div class="videoBox">
                        <SvgIcon style="opacity:1;" width="100px" height="100px" name="videoPlay" color="#414753"></SvgIcon>
                    </div>
                </div>
                <div class="imgBox" v-else>
                    <!-- <img :src="item.img" alt=""> -->
                    <van-image
                        class="imgBoxImg"
                        fit="contain"
                        :src="item.img"
                        lazy-load
                    >
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                        <template v-slot:error>加载失败</template>
                    </van-image>
                </div>
            </div>
        </div>
        <!-- 大图 -->
        <van-overlay :show="isBigShow" @click="isBigShow = false">
            <div class="wrapper">
                <div class="wrapperImg">
                    <img :v-show="isBigShow && isBigImg" :src="isBigImg"/>
                </div>
            </div>
        </van-overlay>
        <!-- 视频 -->
        <VideoPlayer
            v-if="isVideoShow"
            :videoVal
            @close="isVideoShow = false"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import { getAssetsFile } from '@/utils/plugins'
import friendsStore from '@/store/modules/friendsDataList'
const friendsDataStore = friendsStore()

const route = useRoute()
const router = useRouter()

import advertisement1 from '@/assets/img/advertisement1.png'
import advertisement3 from '@/assets/img/advertisement3.png'


const isBigShow = ref<boolean>(false)
const isBigImg = ref<any>('')

const isVideoShow = ref<boolean>(false)
const videoVal = ref<string>('')


const allFriendsPhotoList = ref<any>([])
const friendsItemPhotoList = ref<any>([])

const showBigImg = (item: any) => {
    console.log(item)
    if (item.type == 'local') {
        isBigShow.value = true
        isBigImg.value = getAssetsFile(item.img)
    } else if (item.type == 'video') {
        isVideoShow.value = true
        videoVal.value = item.img
    } else {
        isBigShow.value = true
        isBigImg.value = item.img
    }
}

onMounted(() => {
    if (friendsDataStore.allFriendsPhotoList && friendsDataStore.allFriendsPhotoList.length) {
        allFriendsPhotoList.value = friendsDataStore.allFriendsPhotoList
    }
    console.log('选中的', friendsDataStore.checkPhotoAlbumNameItem)
    friendsItemPhotoList.value = allFriendsPhotoList.value.filter((item: any) => {
        if (item.title === friendsDataStore.checkPhotoAlbumNameItem.title) {
            return item
        }
    })[0]?.imgList || []
    console.log('friendsItemPhotoList', friendsItemPhotoList.value)
    if (friendsItemPhotoList.value.length === 0) {
        showFailToast('未获取到图片，请稍后再试！');
        router.push({
            path: '/collect/photoAlbum',
        })
    }
})

</script>


<style lang="scss" scoped>
.photoAlbumDetailsContent {
    width: 100%;
    box-sizing: border-box;
    // padding: 15px;
    .photoAlbumDetailsTopBox{
        width: 100%;
        overflow: hidden;
        .advertisement {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .photoAlbumDetailsMainBox {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        padding-right: 0;
        margin-top: 30px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        .photoAlbumDetailsMainBoxItem {
            box-sizing: border-box;
            width: 50%;
            height: auto;
            aspect-ratio: 1 / 1;
            padding-right: 15px;
            margin-bottom: 20px;
            overflow: hidden;
            .imgBox {
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .imgBoxImg {
                    width: 100%;
                    height: 100%;
                    min-height: 170px;
                }
                .videoBox {
                    width: 100%;
                    height: 100%;
                    min-height: 170px;
                    background-color: #000;
                    opacity: 0.9;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        .wrapperImg {
            width: 80%;
            height: auto;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>